<template>
  <div class="my-drawer">
    <el-drawer
      v-model="visible"
      direction="rtl"
      style="background: #14152b"
      title="直播设置"
      size="400px"
      :show-close="false"
      custom-class="live-config-drawer"
      :modal-class="'dark-modal'"
    >
      <!-- 内容区域 -->
      <div class="drawer-content">
        <!-- 操作 -->
        <div class="drawer-action">
          <el-button type="primary" @click="startShare">开始分享</el-button>
          <el-button type="danger" @click="stopShare">停止分享</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, inject } from "vue";

const props = defineProps({
  modelValue: Boolean,
});

const emit = defineEmits(["update:modelValue"]);

const StartLive = inject("START_LIVE", () => {});
const StopLive = inject("END_LIVE", () => {});

const startShare = () => {
  StartLive();
};
const stopShare = () => {
  StopLive();
};

// 控制抽屉显示
const visible = ref(props.modelValue);
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
  }
);
watch(visible, (val) => {
  emit("update:modelValue", val);
});

onMounted(() => {});

onUnmounted(() => {
  // 清理资源...
});
</script>

<style lang="scss" scoped>
// 覆盖 element-plus 抽屉的默认样式
.my-drawer {
  background: #14152b;
  position: absolute;
  :deep(.el-drawer__title) {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
  }
}
</style>
